<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>6.CSS3-传统布局VS伸缩布局</title>
  <style>
    /* 传统布局 */
    .box1 {
      width: 500px;
      height: 300px;
      background-color: red;
    }

    .box1 .item1 {
      width: 16.66%;
      height: 300px;
      border: 1px solid black;
      background-color: lightpink;
      box-sizing: border-box;/* 总宽度 = 设置的 width（内部会自动减去 padding + border） */
      float: left;
    }

    /* 
      伸缩布局
      1. 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 
      2. 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 
      3. 方向：默认选择器主轴从左向右，侧轴默认从上到下 
      4. 主轴和侧轴并不是固定不变的，通过flex-direction可以互换。 
      5.一旦父元素设置了 display: flex;，则开启了伸缩布局，父元素中的每一个子元素变成伸缩项，不再区分行块级元素


      设置在父元素上的属性:
    1.display: flex;  开启flex 弹性布局
    2.flex-direction: column;  调整主轴方向 (默认为水平方向)
    3.flex-wrap：        控制是否换行，默认是不换行，如果多个子元素的总宽度大于父元素，就会全部自动缩小
    4.flex-flow ：flex-direction和flex-wrap的简写形式
    5.justify-content调整主轴对齐（水平对齐） , 子盒子如何在父盒子里面水平对齐方式
     设置在子元素上的属性:
    1.flex: 1;       简写属性, 每个伸缩项各占一份
    2.flex-grow    可以拓展子元素的宽度，设置当前元素应该占据剩余空间的比例值
      */
    .box2 {
      width: 500px;
      height: 300px;
      background-color: red;
      /* 设置box2是伸缩盒子 */
      display: flex;
      /* flex-direction: row;  默认从左至右 */
      /* flex-direction: row-reverse;  从右至左 */
      /* flex-direction: column;  从上至下 */
    flex-direction: column-reverse;  /* 从下至上 */
    }
    .box2 .item2 {
      flex: 1; /* flex: 1 都能自动平分空间，无需手动计算百分比。*/
      border: 1px solid black;
      background-color: lightpink;
    }

    .box3 {
      width: 500px;
      height: 300px;
      background-color: red;
      /* 设置box2是伸缩盒子 */
      display: flex;
      /* flex-direction: row;  默认从左至右 */
     /* flex-direction: row-reverse;  从右至左 */
    /* flex-direction: column;  从上至下 */
     /*flex-direction: column-reverse;  从下至上 */
     /* flex-wrap: wrap; *//* 默认不换行 */
     flex-flow: row nowrap;

    
     /*justify-content:flex-start;  默认靠左 */
     /*justify-content:flex-end;/*靠左*/
     /*justify-content:center;/*居中*/
     /*justify-content:space-between;/*左右盒子紧贴父元素，中间留有相同距离的间隔*/
     justify-content:space-around;/*左右盒子距离两边有一定间隙，中间留有相同距离的间隔*/


    }
    .box3 .item3 {
        width: 50px;
        height: 200px;
      border: 1px solid black;
      background-color: lightpink;
    }
  </style>
</head>

<body>
  <!-- 传统布局 -->
  <div class="box1">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
    <div class="item1">6</div>
  </div>
  <br>

  <!-- 伸缩布局 -->
  <div class="box2">
    <sapn class="item2">1</sapn >
    <div class="item2">2</div>
    <div class="item2">3</div>
    <div class="item2">4</div>
    <div class="item2">5</div>
    <div class="item2">6</div>
  </div>
   <br>

  <div class="box3">
    <sapn class="item3">1</sapn >
    <div class="item3">2</div>
    <div class="item3">3</div>
    <div class="item3">4</div>
    <div class="item3">5</div>
    <div class="item3">6</div>
  </div>
 

</body>
</html>